<{include file="v2/header.html"}>
<style>
    .poem-line {
        transition: all 0.3s;
    }
    .poem-line:hover {
        background-color: #f8f5f0;
    }
    .input-line {
        font-family: 'Noto Serif SC', serif;
        border: none;
        border-bottom: 2px dashed #c41e3a;
        background: transparent;
        width: 100%;
        font-size: 1.5rem;
        text-align: center;
        padding: 0 10px 5px;
        color: #c41e3a;
        font-weight: 600;
        outline: none;
    }
</style>
<main class="pt-24 pb-16">
    <!-- 路径导航 -->
    <section class="container mx-auto px-4 mb-8 text-sm text-lightink scroll-reveal">
        <a href="<{spUrl c=main a=index}>" class="hover:text-cinnabar transition-colors">首页</a>
        <span class="mx-2"><i class="fa fa-angle-right"></i></span>
        <a href="<{spUrl c=main a=gushi}>" class="hover:text-cinnabar transition-colors">诗境</a>
        <span class="mx-2"><i class="fa fa-angle-right"></i></span>
        <a href="<{spUrl c=main a=gsDetails id=$poemId}>" class="hover:text-cinnabar transition-colors"><{$poemTitle}></a>
        <span class="mx-2"><i class="fa fa-angle-right"></i></span>
        <span>续写诗句</span>
    </section>
    
    <section class="container mx-auto px-4">
        <div class="mb-8 scroll-reveal">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-song font-bold mb-4">续写《<{$poemTitle}>》</h1>
            <p class="text-lightink">根据原诗意境，尝试续写新的诗句</p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧原诗展示 -->
            <div class="lg:col-span-1">
                <div class="bg-paper p-6 rounded-xl shadow-sm mb-6">
                    <h3 class="font-bold mb-4">原诗欣赏</h3>
                    <div class="font-kai text-xl leading-loose text-center mb-4">
                        <{$poemContent}>
                    </div>
                    <div class="text-right text-lightink">
                        —— <{$poemAuthor}>《<{$poemTitle}>》
                    </div>
                </div>
                
                <div class="bg-paper p-6 rounded-xl shadow-sm">
                    <h3 class="font-bold mb-4">续写提示</h3>
                    <ul class="list-disc pl-5 text-ink/80 space-y-2">
                        <li>注意平仄和押韵，尽量符合原诗风格</li>
                        <li>可延续原诗的意境和主题</li>
                        <li>可尝试从不同角度进行拓展</li>
                        <li>五言诗每句5字，七言诗每句7字</li>
                    </ul>
                    
                    <div class="mt-6">
                        <button id="inspiration-btn" class="w-full py-2 border border-cinnabar text-cinnabar rounded-lg hover:bg-cinnabar/5 transition-colors">
                            <i class="fa fa-lightbulb-o mr-2"></i> 获取灵感
                        </button>
                        <div id="inspiration-box" class="mt-4 p-4 bg-cinnabar/5 rounded-lg hidden">
                            <h4 class="font-medium text-cinnabar mb-2">灵感提示</h4>
                            <p class="text-sm text-ink/80" id="inspiration-text">
                                可以从原诗的景物描写入手，延伸时间或空间维度...
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧续写区域 -->
            <div class="lg:col-span-2">
                <div class="bg-paper p-8 rounded-xl shadow-sm">
                    <h3 class="font-bold mb-6 text-center">我的续写</h3>
                    
                    <div class="font-kai text-[clamp(1.5rem,3vw,2rem)] leading-loose text-center mb-8">
                        <!-- 原诗内容 -->
                        <div class="mb-6 poem-original">
                            <{$poemContent}>
                        </div>
                        
                        <div class="text-lightink my-4">
                            <i class="fa fa-ellipsis-h"></i> 续写部分 <i class="fa fa-ellipsis-h"></i>
                        </div>
                        
                        <!-- 续写输入区域 -->
                        <div class="poem-continuation space-y-4">
                            <div class="poem-line">
                                <input type="text" class="input-line" placeholder="请输入第一句" maxlength="<{$lineLength}>">
                            </div>
                            <div class="poem-line">
                                <input type="text" class="input-line" placeholder="请输入第二句" maxlength="<{$lineLength}>">
                            </div>
                            <div class="poem-line">
                                <input type="text" class="input-line" placeholder="请输入第三句" maxlength="<{$lineLength}>">
                            </div>
                            <div class="poem-line">
                                <input type="text" class="input-line" placeholder="请输入第四句" maxlength="<{$lineLength}>">
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-center space-x-4">
                        <button id="add-line" class="py-2 px-6 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-plus mr-2"></i> 增加一句
                        </button>
                        <button id="save-continuation" class="py-2 px-6 bg-cinnabar text-rice rounded-lg hover:bg-opacity-90 transition-colors">
                            <i class="fa fa-save mr-2"></i> 保存续写
                        </button>
                    </div>
                </div>
                
                <div class="mt-6 bg-paper p-6 rounded-xl shadow-sm">
                    <h3 class="font-bold mb-4">续写说明</h3>
                    <textarea class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar focus:border-transparent min-h-[100px] resize-none" placeholder="写下你对这次续写的想法或说明..."></textarea>
                </div>
            </div>
        </div>
    </section>
</main>
<{include file="v2/footer.html"}>
<script>
    $(document).ready(function() {
        // 诗句长度限制（根据原诗自动判断是五言还是七言）
        const lineLength = <{$lineLength}>; // 从后端获取，5或7
        
        // 输入框限制
        $('.input-line').on('input', function() {
            // 限制输入长度
            if ($(this).val().length > lineLength) {
                $(this).val($(this).val().substring(0, lineLength));
            }
        });
        
        // 增加新的诗句输入框
        $('#add-line').click(function() {
            const newLine = $('<div class="poem-line"><input type="text" class="input-line" placeholder="请输入新的一句" maxlength="' + lineLength + '"></div>');
            $('.poem-continuation').append(newLine);
            
            // 为新添加的输入框绑定事件
            newLine.find('.input-line').on('input', function() {
                if ($(this).val().length > lineLength) {
                    $(this).val($(this).val().substring(0, lineLength));
                }
            });
        });
        
        // 获取灵感按钮
        $('#inspiration-btn').click(function() {
            $('#inspiration-box').toggleClass('hidden');
            
            // 如果显示灵感，随机获取一条提示
            if (!$('#inspiration-box').hasClass('hidden')) {
                const inspirations = [
                    "可以从原诗的情感出发，延续这种情绪的发展",
                    "尝试描绘与原诗相关但不同的季节或时间",
                    "从原诗中的一个意象入手，进行深入刻画",
                    "可以设想原诗作者之后的经历，进行延伸",
                    "换一个视角来描述原诗中的场景",
                    "思考原诗表达的哲理，进行进一步阐释"
                ];
                const randomIndex = Math.floor(Math.random() * inspirations.length);
                $('#inspiration-text').text(inspirations[randomIndex]);
            }
        });
        
        // 保存续写
        $('#save-continuation').click(function() {
            // 收集续写内容
            const continuation = [];
            let isComplete = true;
            
            $('.input-line').each(function(index) {
                const line = $(this).val().trim();
                if (line) {
                    continuation.push(line);
                } else if (index < 2) { // 至少需要填写两句
                    isComplete = false;
                }
            });
            
            if (!isComplete) {
                alert('请至少填写两句续写内容');
                return;
            }
            
            // 这里可以将续写内容发送到服务器保存
            console.log('续写内容:', continuation);
            
            // 模拟保存成功
            alert('续写保存成功！');
            
            // 保存成功后跳转到作品详情页或列表页
            // window.location.href = '<{spUrl c=creation a=myWorks}>';
        });
    });
</script>